<script setup>
import {onMounted,onUnmounted} from "vue";

const prop = defineProps({
  imgList:{
    type: Array,
    default: ()=>{
      return []
    }
  },
  speed:{
    type:Number,
    default:4500
  }
})

onMounted(()=>{
  _startTime()
})

onUnmounted(()=>{

})
// todo 这里的时间不准确 待优化
const _startTime = () =>{
  let index = 0;
  _addBg(index)
  setInterval(function(){
    _removeBg()
    _addBg(index)
    let ind = index+1
    if(ind > prop.imgList.length -1 ){
      index = 0
    }
    else{
      index = ind
    }
  },prop.speed)
}

const _removeBg = () =>{
  let length = prop.imgList.length
  for (let index = 0; index < length; index++) {
    let item = $(".slide-"+index)
    item.removeClass('active')
  }
}
const _addBg = (index)=>{
  let item = $(".slide-"+index)
  item.addClass('active')
}

</script>

<template>
  <div class="div">
    <ul class="speed" style="visibility: visible;" >
      <li v-for="(img,index) in imgList" :key="index" :class="`slide-${index}`" >
        <a target="_blank"><div :style="{backgroundImage:`url(${img})`}"  class="img"></div></a>
      </li>
    </ul>
  </div>
</template>

<style scoped lang="scss">
.div{
  position: relative;
  width:100%;
  height: 100vh;
  .speed{
    li{
      position: absolute;
      width:100%;
      height: 100vh;
      opacity: 0;
      transition: opacity 3.5s;
      .img{
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }
    }
  }
  .active{
    opacity: 1 !important;
  }
}
</style>